<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        .table-choose{
            width: 640px;
            margin: 0 auto;
        }
        .table-title li{
            float: left;
            width: 160px;
            height: 80px;
            line-height: 80px;
            text-align: center;
            background-color: #eee;
            border-bottom: 2px solid #f00;
        }
        /* 清除浮动，法二 */
        /* .table-title{
            overflow: hidden;
        } */
        /* 清除浮动，法一 */
        /* .table-contact{
            clear: both;
        } */
        .select{
            background-color: red!important;
        }
        .show {
            display: block;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <!-- 选项卡的容器 -->
    <div class="table-choose">
        <!-- 选项卡标题 -->
        <ul class="table-title">
            <li class="select">商品介绍</li>
            <li>规格与包装</li>
            <li>售后保障</li>
            <li>商品评价</li>
        </ul>
        <div class="table-contact">
            <div class="show">水煮派蒙烧烤派蒙</div>
            <div class="hide">会飞，矮堇瓜大小，话多，笨</div>
            <div class="hide">一律卖出，概不退换！</div>
            <div class="hide">很不错，好评多多</div>
        </div>
    </div>

    <!-- 标题和内容关系相等 -->
    <!--  -->
    <script>
        //1.设置标题和内容自定义属性
        var lis=document.querySelectorAll('.table-title li');
        var divs=document.querySelectorAll('.table-contact div')
        for(var i=0;i<lis.length;i++){
            lis[i].dataset['index']=i+1;
            divs[i].dataset['index']=i+1;
        }
        for(var i=0;i<lis.length;i++){
            // 标题单击事件
            lis[i].onclick=function (){
                for(var j=0;j<lis.length;j++){
                    lis[j].className='';
                    // this.className='select';
                }
                this.className='select';
                // 找出被单击的标题的index的值 x
                var x=this.dataset['index'];
                // 遍历所有内容div，判断内容div中的data-index的值==x
                for(var y=0;y<divs.length;y++){
                    //不相等，隐藏，相等，显示
                    if(divs[y].dataset['index']==x){
                        divs[y].className='show';
                    }else{
                        divs[y].className='hide';
                    }
                }
            }
        }
    </script>
</body>
</html>